<template>
  <div class="dashboard-analysis">
    <!-- 数据概览卡片 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in statistics" :key="item.title">
        <el-card shadow="hover" class="stat-card">
          <div class="card-header">
            <span class="title">{{ item.title }}</span>
            <el-tooltip :content="item.tooltip" placement="top">
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          <div class="card-content">
            <div class="number">{{ item.number }}</div>
            <div class="trend">
              <span :class="['rate', item.trend > 0 ? 'up' : 'down']">
                {{ Math.abs(item.trend) }}%
                <el-icon>
                  <component :is="item.trend > 0 ? 'CaretTop' : 'CaretBottom'" />
                </el-icon>
              </span>
              <span class="label">较上周</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 销售趋势图 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :span="16">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
              <el-radio-group v-model="saleTimeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">本年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-wrapper">
            <v-chart :option="saleChartOption" autoresize />
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>访问来源</span>
            </div>
          </template>
          <div class="chart-wrapper">
            <v-chart :option="sourceChartOption" autoresize />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 排行榜 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>热门商品</span>
            </div>
          </template>
          <div class="rank-list">
            <div v-for="(item, index) in hotProducts" :key="item.name" class="rank-item">
              <span class="rank-number" :class="{ top3: index < 3 }">{{ index + 1 }}</span>
              <span class="rank-name">{{ item.name }}</span>
              <span class="rank-value">{{ item.sales }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>活跃用户</span>
            </div>
          </template>
          <div class="rank-list">
            <div v-for="(item, index) in activeUsers" :key="item.name" class="rank-item">
              <span class="rank-number" :class="{ top3: index < 3 }">{{ index + 1 }}</span>
              <el-avatar :size="24" :src="item.avatar" />
              <span class="rank-name">{{ item.name }}</span>
              <span class="rank-value">{{ item.points }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import VChart from 'vue-echarts'
import { QuestionFilled, CaretTop, CaretBottom } from '@element-plus/icons-vue'
import * as echarts from 'echarts/core'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import { LineChart, PieChart } from 'echarts/charts'
import { UniversalTransition } from 'echarts/features'
import { CanvasRenderer } from 'echarts/renderers'

// 注册必需的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  LineChart,
  PieChart,
  CanvasRenderer,
  UniversalTransition
])

// 统计数据
const statistics = ref([
  {
    title: '总销售额',
    number: '¥ 126,560',
    trend: 12.3,
    tooltip: '指标说明'
  },
  {
    title: '访问量',
    number: '88,754',
    trend: -11.2,
    tooltip: '指标说明'
  },
  {
    title: '订单量',
    number: '1,234',
    trend: 20.5,
    tooltip: '指标说明'
  },
  {
    title: '成交额',
    number: '¥ 98,234',
    trend: 8.7,
    tooltip: '指标说明'
  }
])

// 销售趋势图配置
const saleTimeRange = ref('week')
const saleChartOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['销售额', '访问量']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '销售额',
      type: 'line',
      smooth: true,
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    },
    {
      name: '访问量',
      type: 'line',
      smooth: true,
      data: [420, 532, 501, 534, 690, 730, 620]
    }
  ]
})

// 访问来源图配置
const sourceChartOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: '搜索引擎' },
        { value: 735, name: '直接访问' },
        { value: 580, name: '邮件营销' },
        { value: 484, name: '联盟广告' },
        { value: 300, name: '视频广告' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

// 热门商品
const hotProducts = ref([
  { name: '小米手机', sales: 1234 },
  { name: '华为平板', sales: 1156 },
  { name: 'iPhone 13', sales: 1087 },
  { name: '联想笔记本', sales: 965 },
  { name: 'iPad Pro', sales: 847 }
])

// 活跃用户
const activeUsers = ref([
  { name: '张三', points: 8234, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' },
  { name: '李四', points: 7689, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' },
  { name: '王五', points: 7456, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' },
  { name: '赵六', points: 6872, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' },
  { name: '钱七', points: 6123, avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' }
])
</script>

<style scoped>
.dashboard-analysis {
  padding: 20px;
  background-color: #f5f7fa;
}

.mt-20 {
  margin-top: 20px;
}

.stat-card {
  height: 180px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 16px;
  color: #606266;
}

.number {
  font-size: 30px;
  font-weight: bold;
  margin: 10px 0;
}

.trend {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.rate {
  display: flex;
  align-items: center;
  margin-right: 8px;
}

.up {
  color: #f56c6c;
}

.down {
  color: #67c23a;
}

.label {
  color: #909399;
}

.chart-wrapper {
  height: 300px;
}

.rank-list {
  .rank-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ebeef5;

    &:last-child {
      border-bottom: none;
    }
  }

  .rank-number {
    width: 20px;
    margin-right: 16px;
    font-weight: bold;
    text-align: center;

    &.top3 {
      color: #f56c6c;
    }
  }

  .rank-name {
    flex: 1;
    margin: 0 16px;
  }

  .rank-value {
    color: #909399;
  }
}

:deep(.el-card__header) {
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}
</style> 